import React from "react"

const OrderInfo = () => {
    const back = () => {
        React.navigate("/business/order")
    }

    React.useEffect(()=>{
        getOrderData()
    },[])

    // 获取orderid
    const [useSearchParams] = React.Router.useSearchParams()
    const [orderid,setOrderid] = React.useState(useSearchParams.get("orderid"))

    // 获取订单数据
    const [order,setOrder] = React.useState({
        status_text:"",
        starttime_text:"",
        endtime_text:"",
        starttime_week:"",
        endtime_week:"",
        day_num:"0",
        origin_price:"",
        price:"",
        type_text:"",
        remark:"",
        roomid:0,
        room:{
            price:"",
            thumb_text:"",
            name:"",
            flag_text:[],
        }
    })
    const [guest,setGuest] = React.useState([])
    const getOrderData = async () => {
        let result = await React.HTTP.post("/order/info",{orderid})
        if(result.code == 1){
            setOrder(result.data.order)
            setGuest(result.data.guest)
        }else{
            React.error(result.msg,()=>{
                React.navigate(-1)
            })
        }
    }

    return (
        <>
            {/* 导航  */}
            <React.UI.NavBar
                onBack={back}
                style={{ background: `rgb(55, 68, 134)`, color: '#fff' }}
            >订单详情</React.UI.NavBar>
            <link rel="stylesheet" href="/assets/css/order_info.css" />
            <div className="order_info">
                <div className="info_title">
                    <h3>{order.status_text}</h3>
                </div>
                <div className="info_content">
                    <div className="content_title">订单信息：</div>

                    <div className="content_item">
                        <p>入住时间</p>
                        <div>{order.starttime_text} {order.starttime_week} - {order.endtime_text} {order.endtime_week}</div>
                    </div>

                    <div className="content_item">
                        <p>入住天数</p>
                        <div>共 {order.day_num} 晚</div>
                    </div>

                    {
                        order.origin_price != order.price ?
                            (
                                <>
                                    <div className="content_item">
                                        <p>优惠价格</p>
                                        <div className="content_price">￥{order.price}</div>
                                    </div>
                                    <div className="content_item">
                                        <p>订单原价</p>
                                        <div className="content_price"><s>￥{order.origin_price}</s></div>
                                    </div>
                                </>
                            ) :
                            (
                                <div className="content_item">
                                    <p>订单价格</p>
                                    <div className="content_price">￥{order.price}</div>
                                </div>
                            )
                    }

                    <div className="content_item">
                        <p>房间单价</p>
                        <div className="content_price">￥{order.room.price}</div>
                    </div>

                    <div className="content_item">
                        <p>支付方式</p>
                        <div>{order.type_text}</div>
                    </div>
                    <div className="content_item">
                        <p>入住人数</p>
                        <div>{guest.length} 人</div>
                    </div>
                    <div className="content_item">
                        <p>订单备注</p>
                        <div>{order.remark}</div>
                    </div>
                </div>

                <div className="info_footer">
                    <div className="content_title">房屋信息：</div>
                    <div className="detail" onClick={() => React.navigate(`/room/info?rid=${order.roomid}`)}>
                        <div className="thumb">
                            <img src={order.room.thumb_text} />
                        </div>
                        <div className="right">
                            <p>{order.room.name}</p>
                            <div className="tips">
                                {order.room.flag_text && order.room.flag_text.map((item: any, key: number) => <React.UI.Tag key={key} color='primary'>{item}</React.UI.Tag>)}
                            </div>
                        </div>
                    </div>
                </div>

                <div className="info_footer">
                    <div className="content_title">住客信息：</div>
                    <div className="detail">
                        <React.UI.List className="list">
                            {guest.map((item: any) => (
                                <React.UI.List.Item
                                    key={item.nickname}
                                    description={`手机号码：${item.mobile}`}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            ))}
                        </React.UI.List>
                    </div>
                </div>
            </div>
        </>
    )
}

export default OrderInfo